<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet/less" type="text/css" href="index.less" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>
</head>
<style>
    body{
      font-size: 30px;
      height: 100%; 
      /* % 是继承父元素的高度 */
    }
    .box{
      width: 0px;
      height: 0px;
      border: 20px solid;
      border-color: red green skyblue blue;
      /* border-color: transparent transparent skyblue transparent; */
    }
    .ct{
      font-size: 20px;
    }
    span{
      font-size: 1em;
      /* 继承离他最近的祖先元素的字体大小 */
    }
    .foot{
      font-size: 1rem;
      /* rem 只继承跟字体大小，和其他的标签的字体大小没有关系 */
    }
    html{
      font-size: 40px;
      height: 100%;
    }
    /* vh 可视化区域的高度 vw可视化区域的宽度 */
    ul{
      list-style: none;
      display: flex;
    }
    li{
      background-color: skyblue;
      width: 100px;
      font-size: 15px;
      text-align: center;
      margin-right: 20px;
      border-radius: 5px;
      padding: 5px 0;
      cursor: pointer;
      position: relative;
    }
    li:hover .tip{
      display: inline-block;
    }
    .tip{
      display: none;
      position: absolute;
      width: 200px;
      padding: 5px 0;
      border-radius: 5px;
      background-color: #000;
      color: #fff;
      top: -60px;
      left: 0;
      transform: translateX(-25%);
    }
    /* ::after 伪元素 */
    .tip::after{ 
      content: ' ';
      border: 10px solid transparent;
      height: 0px;
      width: 0px;
      border-top-color: #000;
      position: absolute;
      top: 30px;
      left: 50%;
      /* background-color: #000; */
    }
    /* 伪类：一般用来辅助选择标签 */
    /* :last-child 我们称为伪类 */
    li:last-child{
      color: red;
    }
    /* after 在什么之后 */
    .aft::after{
      /* content 就代表的是伪元素的内容 */
      content: '123';
    }
    .aft::before{
      content:"456";
      color: red;
    }
    .tree{
      height: 300px;
      width: 300px;
      background-color: greenyellow;
      border-radius: 50% 0 50% 0;
      position: relative;
    }
    .tree::after{
      content: '';
      height: 400px;
      width: 1px;
      background-color: #fff;
      position: absolute;
      top: -100px;
      left: 0px;
      transform: rotate(45deg);
      transform-origin:left bottom;
    }
</style>

<body>
    <div class="box"></div>
    <div class="ct">
        我是父元素的字体
       <span>我是em的一个解释</span>
       <span class="foot">我是rem的一个解释</span>
    </div>
    <ul>
        <li>
            上边
            <p class="tip">我是上边显示的内容</p>
        </li>
        <li>下边</li>
    </ul>
    <div class="aft">我是伪元素内容的讲解</div>


    <div class="tree"></div>
</body>
</html>
